<template>
    <div class="card-header-avatar">
        <el-avatar fit="cover" :size="80" :src="userProfile.avatar">
        </el-avatar>
    </div>
    <div class="home-user-info">
        <!-- 用户信息 -->
        <el-card class="user-card" shadow="hover">
            <span class="user-nickname" @click="$router.push('/member')">{{
                userProfile.nickname
            }}</span>
            <div class="user-section" v-if="useUserStore.profile.nickname">
                <span @click="$router.push('/member')"
                    ><el-icon><Star /></el-icon>收藏宝贝</span
                >
                <span @click="$router.push('/member')"
                    ><el-icon><Place /></el-icon>足迹</span
                >
            </div>
        </el-card>
        <!-- 每日一言 -->
        <el-scrollbar height="320px">
            <div class="yi-yan">
                <el-card class="box-card" shadow="hover">
                    <button @click="findYiYan">换一句</button>
                    <transition name="fade" mode="out-in">
                        <p v-if="yiYan">
                            {{ yiYan.hitokoto }}
                            <br />
                            --{{ yiYan.from_who }} ·《{{ yiYan.from }}》
                        </p>
                    </transition>
                </el-card>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
// 用户个人信息
import { userStore } from '@/stores/user'
import axios from 'axios'
import { ref, reactive } from 'vue'
// 一言
const yiYan = ref('')
const findYiYan = async () => {
    yiYan.value = ''
    const yi = await axios('https://v1.hitokoto.cn/?c=i')
    yiYan.value = yi.data
}
findYiYan()
// 用户头像
const useUserStore = userStore()
const userProfile = reactive({})
userProfile.nickname = useUserStore.profile.nickname
    ? useUserStore.profile.nickname
    : '欢迎，请登录'
userProfile.avatar = useUserStore.profile.avatar
    ? useUserStore.profile.avatar
    : 'https://img.tianzhongli.shop/i/2023/03/14/default.webp'
</script>

<style lang="scss" scoped>
.card-header-avatar {
    position: absolute;
    z-index: 10;
    right: -5px;
    top: 0px;
    cursor: pointer;
}
.home-user-info {
    width: 150px;
    position: absolute;
    right: -40px;
    top: 20px;
    .user-card {
        height: 150px;
        position: relative;
        padding-top: 50px;
        margin-bottom: 10px;
        .user-nickname {
            width: 100px;
            height: 30px;
            position: absolute;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:hover {
                cursor: pointer;
                color: #da9233;
            }
        }
        .user-section {
            padding-top: 30px;
            font-size: 12px;
            display: flex;
            span {
                display: flex;
                align-items: center;
                transition: all 0.2s ease;
                &:hover {
                    cursor: pointer;
                    color: #da9233;
                }
                &:nth-child(1) {
                    margin-right: 5px;
                }
            }
        }
    }
    .yi-yan {
        min-height: 300px;
        button {
            transform: translateX(15px);
            width: 75px;
            height: 25px;
            border: none;
            border-radius: 5px;
            color: rgb(24, 25, 28);
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            right: -30px;
            &:hover {
                background-color: rgb(227, 229, 231);
            }
        }
        .box-card {
            height: auto;
            min-height: 300px;

            p {
                transform: translateY(5px);
            }
        }
    }
}
</style>
